import React, { useState } from 'react'
import { observer } from "mobx-react"
import {useStore} from '../store'

function Login(props) {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const store = useStore()

  console.log('状态：', store)

  const changeUsername = (e) => {
    setUsername(e.target.value)
  }
  const changePassword = (e) => {
    setPassword(e.target.value)
  }

  const loginHandler = () => {//设置登录前访问的页面
    const wantUrl = props.location.state && props.location.state.redirect.pathname
    console.log(wantUrl)
    const url = wantUrl || '/home'
    if(username === 'admin' && password === 'admin') {
      store.userStore.login({
        name: 'admin',
        id: 1,
        token: 'bkcsabkc'
      })
      //sessionStorage.setItem('token', 'bkcsabkc')
      props.history.push(url)
      setUsername('')
      setPassword('')
    }
  }
  return (
    <div className='app-login'>
      <h3>Login</h3>
      <div className='login-form'>
        <div className='input-group'>
          <input type="text" value={username} onChange={changeUsername} />
        </div>
        <div className='input-group'>
          <input type="password" value={password} onChange={changePassword} />
        </div>
        <div className='input-group'>
          <button onClick={loginHandler}>登录</button>
        </div>
      </div>
    </div>
  )
}

export default observer(Login)